<template>
  <div class="monitor-page">
    <base-map id="monitor" :layerList="layerControlList"></base-map>
    <div class="layer-control">
      <div class="control-header">图层控制</div>
      <layer-control layerTitle='三个图层' sliderWidth="100px" :layerControlList="layerControlList"></layer-control>
    </div>
    <el-button @click="show=!show" style="position: absolute; right: 5px; top: 48%; font-size: 25px;z-index:11;">111</el-button>
    <transition name="slide-fade">
      <div class="new-panel" v-if="show">
        <div style="position: absolute; right: 5px; top: 48%; font-size: 25px;z-index:11;">
          <i style=" cursor: pointer;" class="el-icon-caret-left"></i>
        </div>
        <div class="panel-colse">
          <i style="margin:5px 5px 0 0;font-size: 22px;" class="el-icon-close"></i>
        </div>
        <div class="panel-body">
          <div class="panel-title">新建指标任务</div>
          <div class="panel-content">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="配置" name="first">
                <el-form :model="dataForm" label-width="100px" class="el-row">
                  <el-form-item label="任务名称：" class="el-col el-col-23">
                    <el-input></el-input>
                  </el-form-item>
                  <el-popover placement="right" width="400" trigger="hover">
                    <el-form :model="indexForm" label-width="110px" class="el-row">
                      <el-form-item label="指标名称:" class="el-col el-col-23">111</el-form-item>
                      <el-form-item label="指标单位:" class="el-col el-col-23">km²</el-form-item>
                      <el-form-item label="计算方法:" class="el-col el-col-23">222</el-form-item>
                      <el-form-item label="指标属性:" class="el-col el-col-23">约束性</el-form-item>
                    </el-form>
                    <el-form-item label="指标名称：" class="el-col el-col-23" slot="reference">
                      <el-input></el-input>
                    </el-form-item>
                  </el-popover>
                  <el-form-item label="更新方式：" class="el-col el-col-23">
                    <el-radio-group v-model="dataForm.radio">
                      <el-radio label="定时">定时</el-radio>
                      <el-radio label="实时">实时</el-radio>
                      <el-radio label="手动">手动</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label-width="120px" label="定时更新设置：" class="el-col el-col-23">
                  </el-form-item>
                  <el-form-item label="监测时间：" class="el-col el-col-23">
                    <el-date-picker v-model="dataForm.date" type="date" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                </el-form>

              </el-tab-pane>
              <el-tab-pane label="高级配置" name="second">高级配置</el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div style="margin-right:10px;text-align: right;">
          <el-button size="mini">保存</el-button>
          <el-button size="mini">执行</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>

import baseMap from '../../componets/map'
import layerControl from '../../componets/layerControl'

export default {
  data () {
    return {
      show: false,
      activeName: 'first',
      dataForm: {
        radio: '',
        date: ''
      },
      layerControlList: [
        {
          layerId: '0',
          layerName: '优先保护生态区域',
          isSelect: true,
          opacity: 100,
          layerIndex: 0,
          layerType: 'WMTS',
          layerUrl: 'http://t0.tianditu.gov.cn/vec_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
        }, {
          layerId: '1',
          layerName: '优先保护生态区域2',
          isSelect: true,
          layerIndex: 1,
          opacity: 100,
          layerType: 'WMTS',
          layerUrl: 'http://t0.tianditu.gov.cn/img_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
        }, {
          layerId: '2',
          layerName: '向海自然地理边界',
          isSelect: true,
          opacity: 100,
          layerIndex: 2,
          layerType: 'WMTS',
          layerUrl: 'http://t0.tianditu.gov.cn/cva_c/wmts?tk=eec8c7ee00d8d62dd60a274aa1a1beb5&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
        }
      ],
      indexForm: {

      }

    };
  },
  methods: {

  },
  components: {
    baseMap, layerControl
  }
}
</script>

<style lang="less" scoped>
.slide-fade-enter-active {
  transition: all 0.8s cubic-bezier(1, 0.8, 0.5, 1);
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.monitor-page {
  #monitor {
    width: 100%;
    height: 100%;
    z-index: 5;
  }
  .layer-control {
    z-index: 11;
    position: absolute;
    right: 15px;
    top: 20px;
    height: 500px;
    width: 330px;
    border: 1px solid #fff;
  }
  .control-header {
    height: 25px;
    background: darkgray;
    padding: 5px 0 0 8px;
  }
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: relative;
  .new-panel {
    z-index: 10;
    position: absolute;
    background-color: #fff;
    top: 20px;
    bottom: 20px;
    width: 400px;
    left: 10px;
    outline: 1px solid;
    .panel-colse {
      width: 100%;
      height: 30px;
      text-align: right;
    }
    .panel-body {
      padding: 5px 10px;
      height: 89%;
      .panel-content {
        height: 95%;
        width: 100%;
        padding-top: 10px;
      }
    }
  }
}
</style>